<script lang="ts">
	import * as Dialog from '$lib/components/ui/dialog';

	interface Props {
		isUploadingFile: boolean;
	}

	let { isUploadingFile }: Props = $props();
</script>

<Dialog.Root open={isUploadingFile}>
	<Dialog.Content
		interactOutsideBehavior="ignore"
		escapeKeydownBehavior="ignore"
		class="min-h-[25rem] w-[clamp(0px,24rem,100%)]"
	>
		<div class="flex w-full grow flex-col items-center justify-center gap-1 overflow-auto p-6">
			<svg
				viewBox="0 0 172 146"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
				style="aspect-ratio: 172 / 146;"
				class="h-52"
			>
				<path
					d="M171.619 77.2419C171.619 125.486 102.166 159.583 75.3154 138.819C54.3585 122.612 0.492404 121.276 0.492222 77.2417C0.492135 56.1194 18.4793 0.628418 66.7233 0.628418C92.4492 0.628418 105.51 20.8675 126.152 35.7132C144.221 48.7077 171.619 54.7238 171.619 77.2419Z"
					fill="url(#paint0_linear_0_1)"
				/>
				<path
					opacity="0.2"
					d="M81.1874 112.277C81.1874 112.277 89.7739 113.386 100.765 111.774C111.757 110.162 125.012 105.84 125.012 105.84C124.481 107.221 108.578 115.214 104.469 116.504C100.361 117.795 88.0688 119.451 84.4731 116.504C82.9729 115.364 82.1897 113.879 81.1874 112.277Z"
					fill="black"
				/>
				<path
					d="M110.777 70.0598C110.042 69.3705 108.784 68.2559 107.486 67.2387L101.706 62.2847C95.5729 56.7558 83.0983 45.5425 82.2689 44.9205C81.2323 44.143 76.3081 40.7739 74.7531 39.9964C73.1981 39.2188 68.7922 38.4414 68.5331 38.4414C68.2739 38.4414 67.7556 38.1822 67.7556 38.9597C67.7556 39.7372 68.0147 42.588 68.2739 43.1064C68.5331 43.6247 70.3472 48.0306 70.6064 48.5489C70.8656 49.0672 72.6797 52.4364 73.1981 52.9547C73.6127 53.3694 75.2714 55.3736 76.0489 56.3239C76.74 56.7559 78.2259 57.6716 78.6406 57.8789C79.0553 58.0863 81.405 58.6564 82.5281 58.9156C86.0701 59.7795 93.4131 61.5591 94.4498 61.7664C95.7456 62.0256 101.966 64.0989 104.298 65.1356C105.172 65.5238 106.344 66.3436 107.486 67.2387L110.777 70.0598Z"
					fill="url(#paint1_linear_0_1)"
				/>
				<path
					d="M103.557 57.5181L102.28 46.9383C102.069 45.1889 100.48 43.9443 98.7307 44.1584L79.2461 46.5436C71.6552 47.4729 66.2443 54.3811 67.1606 61.9735L103.557 57.5181Z"
					fill="url(#paint2_linear_0_1)"
				/>
				<g filter="url(#filter0_d_0_1)">
					<path
						d="M40.916 101.75L40.9356 119.862C40.9456 129.145 48.479 136.662 57.762 136.652L81.5134 136.627L81.4938 118.514C81.4838 109.231 73.9504 101.714 64.6674 101.724L40.916 101.75Z"
						fill="url(#paint3_linear_0_1)"
					/>
				</g>
				<g filter="url(#filter1_d_0_1)">
					<path
						d="M26.1221 62.6073C26.1221 62.6073 26.4141 61.272 28.1796 60.5816C29.9451 59.8912 31.2794 60.6469 31.2794 60.6469L51.2096 113.08C51.2096 113.08 50.8329 114.225 49.0674 114.915C47.3018 115.606 46.0522 115.04 46.0522 115.04L26.1221 62.6073Z"
						fill="#1B2A32"
					/>
				</g>
				<path
					d="M26.1343 62.6987C26.1343 62.6987 26.2806 61.2893 28.1801 60.5817C30.0796 59.8741 31.4309 60.6275 31.4309 60.6275L33.5044 66.499C33.5044 66.499 32.838 66.8823 31.0669 67.558C29.2958 68.2337 28.347 68.4594 28.347 68.4594L26.1343 62.6987Z"
					fill="white"
				/>
				<path
					d="M125.305 108.712L81.4014 114.086L75.4112 64.4491L100.455 61.3833C110.871 60.1083 120.334 67.52 121.591 77.9378L125.305 108.712Z"
					fill="url(#paint4_linear_0_1)"
				/>
				<ellipse
					cx="4.93707"
					cy="4.97145"
					rx="4.93707"
					ry="4.97145"
					transform="matrix(-0.99259 0.121509 0.11981 0.992797 105.104 74.1157)"
					fill="#FAF7FC"
				/>
				<path
					d="M82.1055 63.5674L84.9781 87.3714L68.6788 89.3667C55.535 90.9757 43.5936 81.6227 42.0071 68.4761L82.1055 63.5674Z"
					fill="url(#paint5_linear_0_1)"
				/>
				<path
					d="M91.9444 54.4229C90.7004 53.1789 84.1693 47.6845 81.0593 45.0929C79.6771 44.0562 76.3943 41.7237 74.321 40.687C71.7293 39.3912 67.0643 39.3912 68.101 38.8729C69.1376 38.3545 70.9518 38.8729 72.2476 38.8729C73.5435 38.8729 76.3943 39.9095 76.9127 40.1687C77.3273 40.376 81.7504 42.1556 83.9102 43.0195C84.6013 42.4148 86.3463 40.998 87.7977 40.1687C89.6119 39.132 93.7585 36.7995 93.7585 36.5403C93.7585 36.2812 94.536 34.9853 95.0544 33.9487C95.5727 32.912 97.1277 30.8387 97.3869 30.8387C97.646 30.8387 99.4602 29.802 100.756 29.802C102.052 29.802 101.793 29.2837 104.125 28.5062C106.458 27.7286 116.047 23.582 116.824 23.582C117.602 23.582 124.599 23.3228 126.414 24.1003C128.228 24.8778 132.634 29.2837 133.152 29.802C133.67 30.3204 136.003 33.6895 135.744 34.2079C135.536 34.6225 134.966 34.3806 134.707 34.2079C132.634 32.6528 128.176 29.491 126.932 29.2837C125.688 29.0763 123.995 30.2339 123.304 30.8387C121.749 31.8753 118.535 34.3633 118.12 36.022C117.602 38.0954 116.047 38.6137 116.047 38.8729C116.047 39.132 117.084 40.4279 117.084 41.2054C117.084 41.8274 116.911 42.674 116.824 43.0195C116.997 43.3651 117.395 44.108 117.602 44.3154C117.861 44.5745 118.639 45.0929 118.639 46.1295V52.0904H119.157V53.9046C121.835 54.0773 127.45 54.5266 128.487 54.9412C129.783 55.4596 130.301 56.4962 131.079 58.0512C131.856 59.6062 132.374 64.2713 132.115 66.0854C131.856 67.8996 130.56 70.7504 128.487 73.3421C126.414 75.9338 123.304 76.193 122.008 76.193C120.712 76.193 117.084 74.8971 116.047 74.3788C115.01 73.8605 110.864 71.2688 110.345 70.7504C109.827 70.2321 100.756 62.9754 99.4602 61.6796C98.1644 60.3837 93.4994 55.9779 91.9444 54.4229Z"
					fill="url(#paint6_linear_0_1)"
				/>
				<path
					d="M141.902 132.14C141.902 118.885 131.157 108.14 117.902 108.14H94.0855C78.3419 108.14 65.5793 120.902 65.5793 136.646H141.902V132.14Z"
					fill="url(#paint7_linear_0_1)"
				/>
				<path
					d="M119.708 55.2651L118.789 49.7478C117.716 49.7478 116.03 50.6673 114.651 50.6673C112.352 50.6673 110.513 51.1271 105.915 49.288C101.646 47.5804 96.7195 43.7707 95.3401 42.8511C94.7991 42.4904 88.9033 39.6326 87.9837 40.0924C87.2481 40.4602 84.9185 42.0848 83.8457 42.8511C89.0565 45.15 99.4123 52.4735 104.995 55.2651C110.513 58.0238 116.796 55.5716 119.708 55.2651Z"
					fill="url(#paint8_linear_0_1)"
				/>
				<defs>
					<filter
						id="filter0_d_0_1"
						x="36.916"
						y="97.7236"
						width="48.5977"
						height="42.9287"
						filterUnits="userSpaceOnUse"
						color-interpolation-filters="sRGB"
					>
						<feFlood flood-opacity="0" result="BackgroundImageFix" />
						<feColorMatrix
							in="SourceAlpha"
							type="matrix"
							values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
							result="hardAlpha"
						/>
						<feOffset />
						<feGaussianBlur stdDeviation="2" />
						<feComposite in2="hardAlpha" operator="out" />
						<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
						<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
						<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
					</filter>
					<filter
						id="filter1_d_0_1"
						x="16.1211"
						y="50.291"
						width="45.0879"
						height="74.9673"
						filterUnits="userSpaceOnUse"
						color-interpolation-filters="sRGB"
					>
						<feFlood flood-opacity="0" result="BackgroundImageFix" />
						<feColorMatrix
							in="SourceAlpha"
							type="matrix"
							values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
							result="hardAlpha"
						/>
						<feOffset />
						<feGaussianBlur stdDeviation="5" />
						<feComposite in2="hardAlpha" operator="out" />
						<feColorMatrix
							type="matrix"
							values="0 0 0 0 0.614518 0 0 0 0 0.305179 0 0 0 0 0.305179 0 0 0 0.25 0"
						/>
						<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
						<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
					</filter>
					<linearGradient
						id="paint0_linear_0_1"
						x1="86.0556"
						y1="0.628418"
						x2="86.0556"
						y2="145.023"
						gradientUnits="userSpaceOnUse"
					>
						<stop stop-color="#FFFAFA" />
						<stop offset="1" stop-color="#FFD0D0" />
					</linearGradient>
					<linearGradient
						id="paint1_linear_0_1"
						x1="67.7556"
						y1="38.2532"
						x2="104.538"
						y2="64.9203"
						gradientUnits="userSpaceOnUse"
					>
						<stop stop-color="#DA8B8B" />
						<stop offset="1" stop-color="#744A4A" />
					</linearGradient>
					<linearGradient
						id="paint2_linear_0_1"
						x1="51.5518"
						y1="97.6833"
						x2="107.401"
						y2="91.1937"
						gradientUnits="userSpaceOnUse"
					>
						<stop stop-color="#FF8D59" />
						<stop offset="1" stop-color="#FF7970" />
					</linearGradient>
					<linearGradient
						id="paint3_linear_0_1"
						x1="67.6193"
						y1="101.721"
						x2="19.3153"
						y2="121.666"
						gradientUnits="userSpaceOnUse"
					>
						<stop stop-color="#C2687F" />
						<stop offset="1" stop-color="#734672" />
					</linearGradient>
					<linearGradient
						id="paint4_linear_0_1"
						x1="121.361"
						y1="76.0322"
						x2="104.759"
						y2="138.572"
						gradientUnits="userSpaceOnUse"
					>
						<stop stop-color="#A35569" />
						<stop offset="1" stop-color="#734672" />
					</linearGradient>
					<linearGradient
						id="paint5_linear_0_1"
						x1="44.8805"
						y1="92.286"
						x2="100.829"
						y2="42.1271"
						gradientUnits="userSpaceOnUse"
					>
						<stop stop-color="#FF8D59" />
						<stop offset="1" stop-color="#FF7970" />
					</linearGradient>
					<linearGradient
						id="paint6_linear_0_1"
						x1="99.0196"
						y1="59.863"
						x2="135.802"
						y2="23.5405"
						gradientUnits="userSpaceOnUse"
					>
						<stop stop-color="#355364" />
						<stop offset="1" />
					</linearGradient>
					<linearGradient
						id="paint7_linear_0_1"
						x1="141.902"
						y1="126.907"
						x2="136.735"
						y2="87.8718"
						gradientUnits="userSpaceOnUse"
					>
						<stop stop-color="#A35569" />
						<stop offset="1" stop-color="#734672" />
					</linearGradient>
					<linearGradient
						id="paint8_linear_0_1"
						x1="101.777"
						y1="56.5622"
						x2="101.777"
						y2="40.0425"
						gradientUnits="userSpaceOnUse"
					>
						<stop stop-color="#FFCFCF" />
						<stop offset="1" stop-color="#FF7C6A" />
					</linearGradient>
				</defs>
			</svg>

			<span class="mt-4 text-lg">Generating</span>
			<span class="text-sm text-[#999]">On the way storming our brain...</span>
		</div>
	</Dialog.Content>
</Dialog.Root>
